<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sortable - UIkit tests</title>

        <script src="../_test.js"></script>
        <script src="../../src/js/components/sortable.js"></script>
        <style>

            .test { height: 100px; }

            .test-item > * {
                display: block;
                padding: 5px 15px;
                background: #f0f0f0;
                color: #444;
            }

            body { padding-bottom 20px; }

        </style>
        <script type="text/javascript">

            jQuery(function($){
                //
                // $("body").on('start.uk.sortable', function (e, sortable, el) {
                //     console.log('start.uk.sortable', sortable, el);
                // }).on('move.uk.sortable', function(e, sortable) {
                //     console.log('move.uk.sortable', sortable);
                // }).on('change.uk.sortable', function(e, sortable, el, mode) {
                //     console.log('change.uk.sortable', sortable, el, mode);
                // }).on('stop.uk.sortable', function(e, sortable) {
                //     console.log('stop.uk.sortable', sortable);
                //     console.log( sortable.serialize() );
                // });
            });

        </script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Sortable</h1>

            <h2>Grid</h2>

            <ul class="uk-sortable uk-grid uk-grid-width-1-2 uk-grid-width-medium-1-5" data-uk-sortable="{handleClass:'uk-panel'}" data-uk-grid-margin>
                <li><div class="uk-panel uk-panel-box test">
                        <a href="http://www.getuikit.com">Item 1</a><br>
                        <img src="holder.js/60x40/sky/auto/" width="60" height="40" alt="">
                </div></li>
                <li><a class="uk-panel uk-panel-box test" href="http://www.getuikit.com">Item 2</a></li>
                <li><div class="uk-panel uk-panel-box test">Item 3</div></li>
                <li><div class="uk-panel uk-panel-box test">Item 4</div></li>
                <li><div class="uk-panel uk-panel-box test">Item 5</div></li>
                <li><div class="uk-panel uk-panel-box test">Item 6</div></li>
                <li><div class="uk-panel uk-panel-box test">Item 7</div></li>
                <li><div class="uk-panel uk-panel-box test">Item 8</div></li>
                <li><div class="uk-panel uk-panel-box test">Item 9</div></li>
                <li><div class="uk-panel uk-panel-box test">Item 10</div></li>
                <li><div class="uk-panel uk-panel-box test">Item 11</div></li>
                <li><div class="uk-panel uk-panel-box test">Item 12</div></li>
            </ul>

            <div class="uk-grid uk-grid-width-medium-1-3">
                <div>

                    <h2>Stacked with data</h2>

                    <div class="uk-sortable uk-margin" data-uk-sortable="{group:'test'}">
                        <div class="uk-margin" data-test="{id: 1, name: 'Item 1'}">
                            <div class="uk-panel uk-panel-box">Item 1</div>
                        </div>
                        <div class="uk-margin" data-test="{id: 2, name: 'Item 2'}">
                            <div class="uk-panel uk-panel-box">Item 2</div>
                        </div>
                        <div class="uk-margin" data-test="{id: 3, name: 'Item 3'}">
                            <div class="uk-panel uk-panel-box">Item 3</div>
                        </div>
                        <div class="uk-margin" data-test="{id: 4, name: 'Item 4'}">
                            <div class="uk-panel uk-panel-box">Item 4</div>
                        </div>
                        <div class="uk-margin" data-test="{id: 5, name: 'Item 5'}">
                            <div class="uk-panel uk-panel-box">Item 5</div>
                        </div>
                    </div>

                </div>
                <div>

                    <h2>Handle</h2>

                    <div class="uk-sortable uk-margin" data-uk-sortable="{handleClass:'uk-sortable-handle', group:'test'}">
                        <div class="uk-margin">
                            <div class="uk-panel uk-panel-box"><i class="uk-sortable-handle uk-icon uk-icon-bars uk-margin-small-right"></i> Item 1</div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-panel uk-panel-box"><i class="uk-sortable-handle uk-icon uk-icon-bars uk-margin-small-right"></i> Item 2</div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-panel uk-panel-box"><i class="uk-sortable-handle uk-icon uk-icon-bars uk-margin-small-right"></i> Item 3</div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-panel uk-panel-box"><i class="uk-sortable-handle uk-icon uk-icon-bars uk-margin-small-right"></i> Item 4</div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-panel uk-panel-box"><i class="uk-sortable-handle uk-icon uk-icon-bars uk-margin-small-right"></i> Item 5</div>
                        </div>
                    </div>

                </div>
                <div>

                    <h2>Empty</h2>

                    <div class="uk-sortable uk-margin" data-uk-sortable="{group:'test'}"></div>

                </div>
            </div>

            <h2>Nav</h2>

            <div class="uk-width-medium-1-4">

                <ul class="uk-sortable uk-nav uk-nav-side" data-uk-sortable="{dragCustomClass:'test-item'}">
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>

            </div>

            <h2>Nested Lists</h2>

            <div>

                <ul class="uk-grid uk-grid-width-1-3 uk-sortable" data-uk-sortable="{group:'main'}" test="1">
                    <li>
                        <div class="uk-panel uk-panel-box">
                            <ul class="uk-sortable" data-uk-sortable="{group:'inner'}" test="2">
                                <li>List 1.1</li>
                                <li>List 1.2</li>
                                <li>List 1.3</li>
                                <li>List 1.4</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="uk-panel uk-panel-box">
                            <ul class="uk-sortable" data-uk-sortable="{group:'inner'}" test="2">
                                <li>List 1.1</li>
                                <li>List 1.2</li>
                                <li>List 1.3</li>
                                <li>List 1.4</li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <ul class="uk-grid uk-grid-width-1-3 uk-sortable" data-uk-sortable="{group:'main'}" test="1">
                    <li>
                        <div class="uk-panel uk-panel-box">
                            <ul class="uk-sortable" data-uk-sortable="{group:'inner'}">
                                <li>List 2.1</li>
                                <li>List 2.2</li>
                                <li>List 2.3</li>
                                <li>List 2.4</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="uk-panel uk-panel-box">
                            <ul class="uk-sortable" data-uk-sortable="{group:'inner'}">
                                <li>List 2.1</li>
                                <li>List 2.2</li>
                                <li>List 2.3</li>
                                <li>List 2.4</li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <ul class="uk-grid uk-grid-width-1-3 uk-sortable" data-uk-sortable="{group:'main'}" test="1">

                    <li>
                        <div class="uk-panel uk-panel-box">
                            <ul class="uk-sortable" data-uk-sortable="{group:'inner'}">
                                <li>List 3.1</li>
                                <li>List 3.2</li>
                                <li>List 3.3</li>
                                <li>List 3.4</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="uk-panel uk-panel-box">
                            <ul class="uk-sortable" data-uk-sortable="{group:'inner'}">
                                <li>List 3.1</li>
                                <li>List 3.2</li>
                                <li>List 3.3</li>
                                <li>List 3.4</li>
                            </ul>
                        </div>
                    </li>
                </ul>

            </div>

        </div>

    </body>
</html>
